Chart.js এর সাথে React ব্যবহার

Chart.js একটি জনপ্রিয় লাইব্রেরি যা বিভিন্ন ধরনের ডেটা ভিজ্যুয়ালাইজেশন করতে সাহায্য করে এবং এটি React অ্যাপ্লিকেশনেও ব্যবহার করা যায়। React এর সাথে Chart.js ব্যবহার করার জন্য react-chartjs-2 লাইব্রেরি ব্যবহৃত হয়, যা Chart.js এর জন্য React এর উপযোগী রেপার (wrapper) প্রদান করে। এই লাইব্রেরি দিয়ে আপনি React কম্পোনেন্টের মধ্যে Chart.js ব্যবহার করতে পারেন।

React অ্যাপে Chart.js ব্যবহার করার ধাপসমূহ

1. Chart.js এবং react-chartjs-2 ইনস্টল করা
2. React কম্পোনেন্টে Chart.js যুক্ত করা
3. ডেটা এবং কনফিগারেশন সেট করা
4. Chart.js কাস্টমাইজেশন

১. Chart.js এবং react-chartjs-2 ইনস্টল করা

প্রথমে, আপনার React প্রজেক্টে Chart.js এবং react-chartjs-2 ইনস্টল করতে হবে।

npm install chart.js react-chartjs-2

এটি Chart.js এবং তার React রেপারকে ইনস্টল করবে, যার মাধ্যমে আপনি React কম্পোনেন্টের মধ্যে Chart.js ব্যবহার করতে পারবেন।

২. React কম্পোনেন্টে Chart.js ব্যবহার করা

Chart.js এবং react-chartjs-2 ইনস্টল করার পর, আপনি একটি React কম্পোনেন্টে Chart.js এর চার্ট তৈরি করতে পারেন। এখানে একটি সাধারণ Bar Chart উদাহরণ দেওয়া হলো।

উদাহরণ: React কম্পোনেন্টে Chart.js এর একটি বার চার্ট

import React from 'react';
import { Bar } from 'react-chartjs-2';
import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend } from 'chart.js';

// Register the necessary components of Chart.js
ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);

const MyChart = () => {
    // Chart.js data configuration
    const data = {
        labels: ['January', 'February', 'March', 'April', 'May'], // X-axis labels
        datasets: [
            {
                label: 'Sales',
                data: [12, 19, 3, 5, 2], // Data points for Sales
                backgroundColor: 'rgba(75, 192, 192, 0.2)', // Bar color
                borderColor: 'rgba(75, 192, 192, 1)', // Border color for bars
                borderWidth: 1
            }
        ]
    };

    // Chart.js options (customize as per need)
    const options = {
        responsive: true, // Make the chart responsive
        plugins: {
            title: {
                display: true,
                text: 'Monthly Sales' // Title for the chart
            },
            tooltip: {
                enabled: true // Enable tooltips
            }
        },
        scales: {
            y: {
                beginAtZero: true // Start the y-axis from zero
            }
        }
    };

    return (
        <div>
            <h2>Sales Bar Chart</h2>
            <Bar data={data} options={options} /> {/* Render the Bar chart */}
        </div>
    );
};

export default MyChart;

ব্যাখ্যা:

1. ChartJS.register(): Chart.js এর বিভিন্ন কম্পোনেন্ট যেমন CategoryScale, LinearScale, BarElement ইত্যাদি রেজিস্টার করতে ChartJS.register() মেথড ব্যবহার করা হয়। এটি নিশ্চিত করে যে শুধুমাত্র প্রয়োজনীয় কম্পোনেন্টগুলোই চার্টে ব্যবহৃত হবে।
2. data: এটি Chart.js এর ডেটার কনফিগারেশন, যেখানে labels এক্স-অক্ষের লেবেল এবং datasets ডেটা পয়েন্ট এবং তাদের কাস্টমাইজেশন (যেমন রং, বর্ডার ইত্যাদি) রাখে।
3. options: চার্টের অপশন কনফিগারেশন, যেখানে গ্রিড, টুলটিপস, এবং অক্ষের কাস্টমাইজেশন (যেমন beginAtZero: true) করা হয়।
4. <Bar />: React কম্পোনেন্ট Bar ব্যবহার করে বার চার্ট রেন্ডার করা হয়।

৩. ডেটা এবং কনফিগারেশন সেট করা

Chart.js এবং react-chartjs-2 এর মাধ্যমে ডেটা এবং কনফিগারেশন খুব সহজে সেট করা যায়। ডেটার মধ্যে আপনি একাধিক datasets ব্যবহার করতে পারেন, এবং স্কেল ও টিক্সের জন্য কাস্টমাইজেশন করতে পারেন। আপনি আরও কাস্টম অপশন যেমন tooltips, animations, legend ইত্যাদি কাস্টমাইজ করতে পারেন।

৪. Chart.js কাস্টমাইজেশন

React এর মধ্যে Chart.js চার্ট কাস্টমাইজ করতে বেশ কিছু অপশন আছে:

• অন্যান্য চার্ট টাইপ: Line, Pie, Doughnut, Radar ইত্যাদি।
• কাস্টম প্লাগইন: React কম্পোনেন্টে কাস্টম প্লাগইন যোগ করে অতিরিক্ত ফিচার বা ইন্টারঅ্যাকশন যোগ করা।
• অ্যানিমেশন: চার্ট রেন্ডারিং এর সময় অ্যানিমেশন যোগ করা যায়।

// Example for Line chart
import { Line } from 'react-chartjs-2';

const LineChart = () => {
    const data = {
        labels: ['January', 'February', 'March', 'April', 'May'],
        datasets: [
            {
                label: 'Growth',
                data: [10, 20, 30, 40, 50],
                borderColor: 'rgba(255, 99, 132, 1)',
                fill: false
            }
        ]
    };

    const options = {
        responsive: true,
        scales: {
            y: {
                beginAtZero: true
            }
        }
    };

    return <Line data={data} options={options} />;
};

সারাংশ

React এর সাথে Chart.js ব্যবহার করা খুবই সহজ এবং এটি আপনাকে ইন্টারঅ্যাকটিভ চার্ট তৈরি করতে সহায়তা করে। আপনি react-chartjs-2 লাইব্রেরি ব্যবহার করে Chart.js এর ক্ষমতাগুলি React কম্পোনেন্টে এক্সপ্লয়েট করতে পারেন এবং চার্টের কাস্টমাইজেশন করতে পারেন, যেমন ডেটাসেট, অপশন এবং টুলটিপস ইত্যাদি। এটি ডেটা ভিজ্যুয়ালাইজেশনের জন্য শক্তিশালী টুল, বিশেষ করে React অ্যাপ্লিকেশনে।